<template>
  <div>
    <h1>轴承检修记录单</h1>
    <p>单位名称：{{zcjxjl.dwName}}</p>
    <div class="dataTable">
      <table cellspacing="0" border="1" style="border-collapse:collapse;">
        <!-- 定义100列 该行必须要有，相当于标尺 -->
        <tr class="noTd">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <!-- 检修日期  轴承编号 轴承型号  -->
        <tr>
          <td colspan="6">
            检修
            <br />日期
          </td>
          <td colspan="27">{{zcjxjl.jxrq}}</td>
          <td colspan="6">
            轴承
            <br />编号
          </td>
          <td class="strong" colspan="27">{{zcjxjl.zcbh}}</td>
          <td colspan="6">
            轴承
            <br />型号
          </td>
          <td colspan="28" class="strong">{{zcjxjl.zcxh}}</td>
        </tr>
        <!-- 轴承类别 -->
        <tr>
          <td colspan="50" height="30px">轴承类别</td>
          <td colspan="50">
            <div class="around">
              <div>
                进口轴承
                <input type="checkbox" :checked="zcjxjl.zclb=='进口轴承'?true:false" />
              </div>
              <div>
                国产轴承
                <input type="checkbox" :checked="zcjxjl.zclb=='国产轴承'?true:false" />
              </div>
            </div>
          </td>
        </tr>
        <!-- 检修探伤	轴承  基本情况 -->
        <tr>
          <td rowspan="16" colspan="3">
            检
            <br />修
            <br />探
            <br />伤
          </td>
          <td rowspan="11" colspan="3">轴承</td>
          <td rowspan="3" colspan="6">
            基本
            <br />情况
          </td>
          <td colspan="16" height="40px">制造单位</td>
          <td colspan="22">{{zcjxjl.zzdw}}</td>
          <td colspan="18">制造年月</td>
          <td colspan="32" class="strong">{{zcjxjl.zzny}}</td>
        </tr>
        <tr>
          <td rowspan="2" colspan="16">装用年月</td>
          <td rowspan="2" colspan="22" class="strong">{{zcjxjl.zyny}}</td>
          <td rowspan="2" colspan="12">保持架</td>
          <td colspan="6" height="40px">材质</td>
          <td colspan="32">
            <div class="around">
              <div>
                1.铜
                <input type="checkbox" :checked="zcjxjl.bcjcz=='铜'?true:false" />
              </div>
              <div>
                2.工程塑料
                <input type="checkbox" :checked="zcjxjl.bcjcz=='工程塑料'?true:false" />
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="6" height="40px">厂家</td>
          <td colspan="32">{{zcjxjl.bcjcj}}</td>
        </tr>
        <!-- 检修探伤	轴承  外观检查  外圈 -->
        <tr>
          <td rowspan="6" colspan="6">
            外
            <br />观
            <br />检
            <br />查
          </td>
          <td rowspan="2" colspan="7">外圈</td>
          <td rowspan="2" colspan="73" align="left">
            <div>
              <!-- 外圈 checkBox -->
              <template v-for="(item,index) in jxts_zc_wgjc_wqList">
                {{item}}
                <input
                  type="checkbox"
                  :key="index"
                  :checked="zcjxjl.wgjc_wq.includes(item)"
                  @change="zcWgjcWqChange($event,item)"
                />
              </template>
            </div>
          </td>
          <td colspan="12" height="30px">检查者</td>
        </tr>
        <tr>
          <td colspan="12" height="30px">{{zcjxjl.wgjc_wqJcz}}</td>
        </tr>
        <!-- 检修探伤	轴承  外观检查  滚子 -->
        <tr>
          <td rowspan="2" colspan="7">滚子</td>
          <td rowspan="2" colspan="73" align="left">
            <div>
              <!-- 滚子 checkBox -->
              <template v-for="(item,index) in jxts_zc_wgjc_gzList">
                {{item}}
                <input
                  type="checkbox"
                  :key="index"
                  :checked="zcjxjl.wgjc_gz.includes(item)"
                  @change="zcWgjcGzChange($event,item)"
                />
              </template>
            </div>
          </td>
          <td colspan="12" height="30px">检查者</td>
        </tr>
        <tr>
          <td colspan="12" height="30px">{{zcjxjl.wgjc_gzJcz}}</td>
        </tr>
        <!-- 检修探伤	轴承  外观检查  保持架 -->
        <tr>
          <td rowspan="2" colspan="7">保持架</td>
          <td rowspan="2" colspan="73" align="left">
            <div>
              <!-- 保持架 checkBox -->
              <template v-for="(item,index) in jxts_zc_wgjc_bcjList">
                {{item}}
                <input
                  type="checkbox"
                  :key="index"
                  :checked="zcjxjl.wgjc_bcj.includes(item)"
                  @change="zcWgjcBcjChange($event,item)"
                />
              </template>
            </div>
          </td>
          <td colspan="12" height="30px">检查者</td>
        </tr>
        <tr>
          <td colspan="12" height="30px">{{zcjxjl.wgjc_bcjJcz}}</td>
        </tr>
        <!-- 检修探伤	轴承  探伤检查 -->
        <tr>
          <td rowspan="2" colspan="6">
            探伤
            <br />检查
          </td>
          <td height="30px" colspan="7">外圈</td>
          <td colspan="58" align="left">
            <!-- 外圈 checkBox -->
            <template v-for="(item,index) in jxts_zc_tsjc_wqList">
              {{item}}
              <input
                type="checkbox"
                :key="index"
                :checked="zcjxjl.tsjc_wq.includes(item)"
                @change="zcTsjcWqChange($event,item)"
              />
            </template>
          </td>
          <td colspan="12">探伤者</td>
          <td colspan="12">{{zcjxjl.tsjc_wqTsz}}</td>
        </tr>
        <tr>
          <td height="30px" colspan="7">滚子</td>
          <td colspan="58" align="left">
            <!-- 滚子 checkBox -->
            <template v-for="(item,index) in jxts_zc_tsjc_gzList">
              {{item}}
              <input
                type="checkbox"
                :key="index"
                :checked="zcjxjl.tsjc_gz.includes(item)"
                @change="zcTsjcGzChange($event,item)"
              />
            </template>
          </td>
          <td colspan="12">探伤者</td>
          <td colspan="12">{{zcjxjl.tsjc_gzTsz}}</td>
        </tr>
        <!-- 检修探伤	内圈  基本情况-->
        <tr>
          <td rowspan="5" colspan="3">内圈</td>
          <td rowspan="2" colspan="6">
            基本
            <br />情况
          </td>
          <td height="30px" colspan="26">制造单位</td>
          <td colspan="39">{{zcjxjl.nq_jbqk_zzdw}}</td>
          <td colspan="12">制造年月</td>
          <td colspan="12" class="strong">{{zcjxjl.nq_jbqk_zzny}}</td>
        </tr>
        <tr>
          <td height="30px" colspan="26">装用年月</td>
          <td colspan="74" class="strong">{{zcjxjl.nq_jbqk_zyny}}</td>
        </tr>
        <!-- 检修探伤	内圈 外观检查 -->
        <tr>
          <td rowspan="2" colspan="6">
            外观
            <br />检查
          </td>
          <td rowspan="2" colspan="80" align="left">
            <!-- 外观检查 checkBox -->
            <template v-for="(item,index) in jxts_nq_wgjcList">
              {{item}}
              <input
                type="checkbox"
                :key="index"
                :checked="zcjxjl.nq_wgjc.includes(item)"
                @change="zcTsNqWgjcChange($event,item)"
              />
            </template>
          </td>
          <td colspan="8" height="30px">检查者</td>
        </tr>
        <tr>
          <td colspan="8" height="30px">{{zcjxjl.nq_wgjc_jcz}}</td>
        </tr>
        <!-- 检修探伤	内圈  探伤检查-->
        <tr>
          <td height="30px" colspan="6">
            探伤
            <br />检查
          </td>
          <td colspan="42" align="left">
            1.合格
            <input type="checkbox" :checked="zcjxjl.nq_tsjc.includes('1.合格')" />
            2.裂纹
            <input type="checkbox" :checked="zcjxjl.nq_tsjc.includes('2.裂纹')" />
          </td>
          <td colspan="23">检查者</td>
          <td colspan="23">{{zcjxjl.nq_tsjc_jcz}}</td>
        </tr>
        <!-- 更换内圈  制造单位 -->
        <tr>
          <td rowspan="2" colspan="6">
            更换
            <br />内圈
          </td>
          <td colspan="12" height='40px'>制造单位</td>
          <td colspan="12">{{zcjxjl.ghnq_zzdw}}</td>
          <td colspan="12">制造年月</td>
          <td colspan="12">{{zcjxjl.ghnq_zzny}}</td>
          <td colspan="12">装用年月</td>
          <td colspan="11">{{zcjxjl.ghnq_zyny}}</td>
          <td colspan="12" height="30px">更换原因</td>
          <td colspan="12">{{zcjxjl.ghnq_ghyy}}</td>
        </tr>
        <!-- 更换内圈   外观检查者-->
        <tr>
          <td colspan="12" height="40px">外观检查者</td>
          <td colspan="12">{{zcjxjl.ghnq_wgjcz}}</td>
          <td colspan="12">探伤检查</td>
          <td colspan="24">
            1.合格
            <input type="checkbox" :checked="zcjxjl.ghnq_tsjc.includes('1.合格')" />
            2.裂纹
            <input type="checkbox" :checked="zcjxjl.ghnq_tsjc.includes('2.裂纹')" />
          </td>
          <td colspan="23">探伤者</td>
          <td colspan="12">{{zcjxjl.ghnq_tsz}}</td>
        </tr>
        <!-- 更换保持架  外观检查者  -->
        <tr>
          <td colspan="6" width='48px'>
            更换
            <br />保持架
          </td>
          <td colspan="12">外观检查者</td>
          <td colspan="12">{{zcjxjl.ghbcj_wgjcz}}</td>
          <td colspan="12">更换原因</td>
          <td colspan="58">{{zcjxjl.ghbcj_ghyy}}</td>
        </tr>
        <!-- 检测  项目  -->
        <tr>
          <td rowspan="3" colspan="3">检测</td>
          <td height="40px" colspan="10">项目</td>
          <td colspan="20">内圈内径</td>
          <td colspan="18">内圈滚道直径</td>
          <td colspan="16">外圈外径</td>
          <td colspan="18">组装前径向游隙</td>
          <td colspan="20">组装前凸出量</td>
        </tr>
        <!-- 检测  尺寸 -->
        <tr>
          <td height="40px" colspan="10">尺寸</td>
          <td colspan="20" class="strong">{{zcjxjl.jc_cc_nqnj}}</td>
          <td class="strong" colspan="18">{{zcjxjl.jc_cc_nqgdzj}}</td>
          <td class="strong" colspan="16">{{zcjxjl.jc_cc_wqwj}}</td>
          <td class="strong" colspan="18">{{zcjxjl.jc_cc_zzqjxyx}}</td>
          <td colspan="20" class="strong">{{zcjxjl.jc_cc_zzqtcl}}</td>
        </tr>
        <!-- 检测  工作者 -->
        <tr>
          <td height="40px" colspan="10">工作者</td>
          <td colspan="38" class="red">{{zcjxjl.jc_gzz1}}</td>
          <td colspan="54" class="red">{{zcjxjl.jc_gzz2}}</td>
        </tr>
        <!-- 工长  质检员  验收员 -->
        <tr>
          <td colspan="13" height="40px">工长</td>
          <td colspan="24">{{zcjxjl.gz}}</td>
          <td colspan="14">质检员</td>
          <td colspan="16">{{zcjxjl.zjy}}</td>
          <td colspan="18">验收员</td>
          <td colspan="18">{{zcjxjl.ysy}}</td>
        </tr>
        <!-- 存放 -->
        <tr>
          <td height="40px" colspan="6">存放</td>
          <td colspan="7">库位</td>
          <td colspan="34" class="strong">{{zcjxjl.cf_kw}}</td>
          <td colspan="16">走行公里</td>
          <td colspan="14">{{zcjxjl.cf_zxgl}}</td>
          <td colspan="12">等级</td>
          <td colspan="20">{{zcjxjl.cf_dj}}</td>
        </tr>
        <!-- 备注 -->
        <tr>
          <td height="40px" colspan="6">备注</td>
          <td colspan="94">{{zcjxjl.bz}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: ['zcjxjl'],
  data() {
    return {
      // 轴承检修记录表单数据
      // zcjxjl: {
      //   dwName: "西安客车车辆段检修车间",
      //   jxrq: "2020年08月13日",
      //   zcbh: "573-1902639",
      //   zcxh: "NUP3226X1",
      //   zclb: "国产轴承",
      //   zzdw: "TMB",
      //   zzny: "1905",
      //   zyny: "1911",
      //   bcjcz: "铜",
      //   bcjcj: "LCT",
      //   wgjc_wq: ["1.合格", "8.热变色"],
      //   wgjc_wqJcz: "王瑞",
      //   wgjc_gz: ["1.合格"],
      //   wgjc_gzJcz: "任耀萍",
      //   wgjc_bcj: ["2.裂损"],
      //   wgjc_bcjJcz: "李阳",
      //   tsjc_wq: ["3.不探"],
      //   tsjc_wqTsz: "陈浩",
      //   tsjc_gz: ["3.不探"],
      //   tsjc_gzTsz: "陈浩",
      //   nq_jbqk_zzdw: "TMB",
      //   nq_jbqk_zzny: "1906",
      //   nq_jbqk_zyny: "1911",
      //   nq_wgjc: ["5.碰伤划伤"],
      //   nq_wgjc_jcz: "王瑞",
      //   nq_tsjc: ["1.合格"],
      //   nq_tsjc_jcz: "陈浩",
      //   ghnq_zzdw: "— —",
      //   ghnq_zzny: "",
      //   ghnq_zyny: "",
      //   ghnq_ghyy: "",
      //   ghnq_wgjcz: "",
      //   ghnq_tsjc: ["2.裂纹"],
      //   ghnq_tsz: "— —",
      //   ghbcj_wgjcz: "— —",
      //   ghbcj_ghyy: "— —",
      //   jc_cc_nqnj: "130-0.005",
      //   jc_cc_nqgdzj: "158-0.007",
      //   jc_cc_wqwj: "250-0.007",
      //   jc_cc_zzqjxyx: "0.16",
      //   jc_cc_zzqtcl: "0.57",
      //   jc_gzz1: "崔玲玲",
      //   jc_gzz2: "崔玲玲",
      //   gz: "",
      //   zjy: "",
      //   ysy: "",
      //   cf_kw: "19-3-2",
      //   cf_zxgl: "————",
      //   cf_dj: "————",
      //   bz: "573-1902639",
      // },
      //  检修探伤--轴承--外观检查--外圈  checkbox
      jxts_zc_wgjc_wqList: [
        "1.合格",
        "2.裂损剥离",
        "3.麻点",
        "4.凹痕压痕",
        "5.碰伤划伤",
        "6.腐蚀",
        "7.电蚀",
        "8.热变色",
        "9.超年限",
        "10.其他",
      ],
      //   检修探伤--轴承--外观检查--滚子  checkbox
      jxts_zc_wgjc_gzList: [
        "1.合格",
        "2.裂损剥离",
        "3.麻点",
        "4.凹痕压痕",
        "5.碰伤划伤",
        "6.腐蚀",
        "7.电蚀",
        "8.热变色",
        "9.其他",
      ],
      //检修探伤--轴承--外观检查--保持架  checkbox
      jxts_zc_wgjc_bcjList: ["1.合格", "2.裂损", "3.变形", "4.其他"],
      //检修探伤--轴承--探伤检查--外圈  checkbox
      jxts_zc_tsjc_wqList: ["1.合格", "2.裂纹", "3.不探"],
      //检修探伤--轴承--探伤检查--滚子  checkbox
      jxts_zc_tsjc_gzList: ["1.合格", "2.裂纹", "3.不探"],
      //  检修探伤--内圈--外观检查  checkbox
      jxts_nq_wgjcList: [
        "1.合格",
        "2.裂损剥离",
        "3.麻点",
        "4.凹痕压痕",
        "5.碰伤划伤",
        "6.腐蚀",
        "7.电蚀",
        "8.热变色",
        "9.超年限",
        "10.其他",
      ],
    };
  },
  methods: {
    //   检修探伤--轴承--外观检查--外圈  checkbox点击事件
    zcWgjcWqChange(e, item) {
      console.log(item + "------" + e.target.checked);
    },
    //   检修探伤--轴承--外观检查--滚子  checkbox点击事件
    zcWgjcGzChange(e, item) {
      console.log(item + "------" + e.target.checked);
    },
    //   检修探伤--轴承--外观检查--保持架  checkbox点击事件
    zcWgjcBcjChange(e, item) {
      console.log(item + "------" + e.target.checked);
    },
    //   检修探伤--轴承--探伤检查--外圈  checkbox点击事件
    zcTsjcWqChange(e, item) {
      console.log(item + "------" + e.target.checked);
    },
    //   检修探伤--轴承--探伤检查--滚子  checkbox点击事件
    zcTsjcGzChange(e, item) {
      console.log(item + "------" + e.target.checked);
    },
    //   检修探伤--内圈--外观检查  checkbox点击事件
    zcTsNqWgjcChange(e, item) {
      console.log(item + "------" + e.target.checked);
    },
  },
};
</script>

<style lang="css" scoped>
h1 {
  text-align: center;
  margin: 0;
}
p {
  margin: 0;
  margin-top: 10px;
  text-indent: 2em;
}
.dataTable {
  padding: 10px;
}
table {
  width: 100%;
  text-align: center;
  font-size: 12px;
}
td {
  width: 1%;
}
.around {
  display: flex;
  justify-content: space-around;
}
.strong {
  font-weight: 600;
}
.noTd {
  visibility: hidden;
}
/* 红色字体 */
.red {
  color: red;
  font-weight: bold;
}
/* 修改checkbox样式 */
input[type="checkbox"] {
  width: 13px;
  height: 13px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 13px;
  margin: 3px;
  margin-top: -2px;
  position: relative;
}
input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}
input[type="checkbox"]:checked::before {
  content: "\2714";
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #000;
  color: #000;
  font-size: 12px;
  font-weight: bold;
}
</style>